<template>
    <div class='layout'>
        <div class="aside">
            <div class="logo">
                <img src="../assets/imgs/logo.png">
            </div>
            <MenuEx @menu-click="onClickMenu" :menushow="MenuSubVisible" ref="refMenuEx" />
        </div>
        <div class="right-box">
            <div class="header">
                <TabHeader />
                <div class="header-right">
                    <div class="header-tool">
                        <el-icon><i-ep-Bell /></el-icon>
                    </div>
                    <div class="header-tool">
                        <el-icon><i-ep-Bell /></el-icon>
                    </div>
                </div>
            </div>
            <div class="main">
                <div class="tab-content">首页</div>
                <div class="tab-content">用户及权限</div>
                <div class="tab-content" style="display: block;">其它出入库</div>
                <div class="tab-content">商品库存</div>
            </div>
            <div v-if="MenuSubVisible" class="menu-overlay" @click="onHideMenuSub">
                <div class="menu-sub-back" @click.stop="">
                    <MenuSub />
                </div>
            </div>
        </div>
    </div>
</template>

<script lang='ts' setup name=''>
import MenuEx from '../components/System/MenuEx.vue';
import MenuSub from '../components/System/MenuSub.vue';
import TabHeader from '../components/System/TabHeader.vue';
// import TabsEx from '../components/System/TabsEx.vue';
import { ref } from 'vue'

let MenuSubVisible = ref(false);
const refMenuEx = ref()

function onClickMenu() {
    MenuSubVisible.value = true;
}

function onHideMenuSub() {
    MenuSubVisible.value = false
    refMenuEx.value.UnSelected()
}
</script>

<style lang='scss' scoped>
.layout {
    width: 100%;
    height: 100%;
    position: relative;

    .aside {
        position: absolute;
        top: 0;
        left: 0;
        width: 60px;
        bottom: 0;
        display: flex;
        flex-direction: column;
        background: #0086f1;

        .logo {
            display: flex;
            flex-direction: column;
        }

    }

    .right-box {
        position: absolute;
        top: 0;
        left: 60px;
        right: 0;
        bottom: 0;
        overflow: auto;
        display: flex;
        flex-direction: column;

        .header {
            position: relative;
            top: 0;
            left: 0;
            right: 0;
            height: 36px;
            background: #f2f3f5;
            display: flex;

            .header-right {
                display: flex;
                align-items: center;
                justify-content: center;

                .header-tool {
                    min-width: 30px;
                    height: 30px;
                    text-align: center;
                    border-radius: 4px;
                    color: #555555;
                    white-space: nowrap;
                    margin-left: 12px;
                    cursor: pointer;
                }
            }
        }

        .main {
            width: 100%;
            height: 100%;

            .tab-content {
                height: 100%;
                width: 100%;
                display: none;
            }
        }

        .menu-overlay {
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            background-color: rgba(0, 0, 0, .2);

            .menu-sub-back {
                position: absolute;
                top: 0;
                left: 0;
                bottom: 0;
                width: 500px;
                display: flex;
                // flex-direction: row;
                color: #1d1d1d;
            }
        }
    }

}
</style>